<template>
	<view>
		<u-navbar title="选择群成员">
			<view slot="right" class="u-m-r-30 cu-btn bg-blue" @tap="submit">
				确认{{chosen.length?`(${chosen.length})`:''}}
			</view>
		</u-navbar>
		<u-sticky>
			<view class="bg-white u-p-x-30 u-p-y-14 solid-bottom">
				<u-search v-model="key" placeholder="搜索成员名称" :show-action="false"></u-search>
			</view>
		</u-sticky>
		<view class="u-flex u-p-x-30 u-p-y-20 bg-white u-border-bottom"
			v-for="(user,index) in users" 
			:key="index"
			@tap="pickUser(user)">
			<view class="checkbox u-m-r-30" :class="{checked:user.checked}">
			</view>
			<u-avatar :src="user.avatar" mode="square"></u-avatar>
			<text class="u-m-l-20 u-font-34">{{user.userName}}</text>
			<view class="u-flex-1">
				
			</view>
			<text class="text-gray u-font-32">{{user.vest}}</text>
		</view>
	</view>
</template>

<script>
	import {goback,delay} from "@/utils/util.js"
	import {fetchGroupMember} from "@/api/addr.js"
	import {mapGetters,mapActions} from "vuex"
	import DC from "@/DC/index.js"
	export default {
		data() {
			return {
				id:'', 
				chosen:[],
				key:'',
				members:{
					list:[],
					pageNo:1,
					pageSize:20,
					nomore:false,
					loading:false
				},
				eventChannel:null
			};
		},
		computed:{
			...mapGetters('user',['userInfo']),
			users(){
				return this.members.list.map((item)=>({...item,checked:this.chosen.some(({userId})=>userId==item.userId)}))
			},
		},
		watch:{
			key(){
				this.$u.debounce(this.resetMember,500)
			}
		},
		onLoad({id}) {
			this.id = id
			this.resetMember()
			this.eventChannel = this.getOpenerEventChannel();
			this.eventChannel.on('initChosen',(chosen)=>{
				this.chosen = chosen
			})
		},
		onReachBottom() {
			this.moreMember()
		},
		methods:{
			async resetMember(){
				this.members.list = []
				this.members.pageNo = 1
				this.members.nomore = false
				await this.moreMember()
			},
			async moreMember(){
				if(this.members.loading){
					throw new Error('正在请求中')
				}
				try{
					this.members.loading = true
					if(this.members.nomore){
						return []
					}
					const list = await fetchGroupMember({id:this.id,name:this.key,pageNo:this.members.pageNo,pageSize:this.members.pageSize})
					if(!list||list.length<this.members.pageSize){
						this.members.nomore = true
					}else {
						this.members.pageNo++
					}
					this.members.list.push(...list)
					return list
				}finally{
					this.members.loading = false
				}
			},
			pickUser(user){
				if(user.checked){
					this.chosen = this.chosen.filter((item)=>item.userId!=user.userId)
				}else{
					this.chosen.push({...user})
				}
			},
			async submit(){
				this.eventChannel.emit('confirm',this.chosen)
				goback()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.checkbox{
		width: 40rpx;
		height: 40rpx;
		background-color: $u-type-info-light;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		transition: all 0.2s ease-out;
		&::after{
			font-family: "cuIcon";
			content: "\e645";
			color: #FFFFFF;
			opacity: 0;
			transition: all 0.2s ease-out;
		}
		&.checked{
			background-color: $u-type-primary;
			&::after{
				opacity: 1;
			}
		}
		&.disable{
			background-color: #aaaaaa;
		}
	}
</style>
